<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器案例</title>
    <style> /* 在HTML中加入css*/
        body{
            background-color:#b0c4de;
        }
        span{ /* 标签名选择器,选中所有span */
            font-size: 24px; /*字号*/
            font-family: 黑体;/* 字体 */
        }
        	 /* 选择class=a的元素 */
        .a{
            background-color: cornflowerblue; /*背景颜色*/
            color:red; /*字体颜色*/
        }
        .b{
            background-color: lightsalmon;
            color: black;
        }
        
        .center
        {
            text-align:center;
        }

        #p1{
            text-indent: 200px; /* 首行缩进*/
        }
        .a,.b,#p1{
            background-color: #d39a9a;
        }
        input[type='text']{
		background-color: #6495ED;
	    }
    </style> 
</head>
<body>
    <span>
        <p>这是第一个段落</p>
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
    </span>

    <p>这是第四个段落</p>

    <p class="a b">123</p> <!-- b覆盖a-->

    <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p> 

    <p id="p1">123</p>

    <input type="text">
</body>
</html>